<template>
  <div id="app">
    <div class="container">
      <div class="left-panel">
        <h2>数据源111</h2>
        <DropList v-model="items" :drop-targets="['right-panel']" @drop="handleDrop" class="drop-list">
          <template #item="{ element }">
            <Drag :key="element.authApiCode">
              <div class="item">{{ element.authApiName }}</div>
            </Drag>
          </template>
        </DropList>
      </div>
      <div class="right-panel" id="right-panel">
        <h2>生成的列表</h2>
        <!-- <drop-list v-model="selectedItems" :drop-targets="['right-panel']">
          <template #item="{ element }">
            <drag :key="element.authApiCode">
              <div class="generated-item">
                <div>{{ element.authApiName }}</div>
                <div>
                  <ul>
                    <li v-for="input in element.inputList" :key="input.code">
                      {{ input.name }} ({{ input.type }})
                    </li>
                  </ul>
                </div>
                <div>
                  <el-select v-model="element.mappingField" placeholder="请选择">
                    <el-option
                      v-for="option in mappingOptions"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
            </drag>
          </template>
        </drop-list> -->
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import { ElSelect, ElOption } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

export default {
  components: {
    ElSelect,
    ElOption,
    draggable
  },
  data() {
    return {
      items: [
        {
          authApiCode: '1',
          authApiName: '用户名称1',
          authApiDsc: '用户描述1',
          inputList: [
            { code: '1', name: '名称1', type: 'text' },
            { code: '2', name: '名称2', type: 'number' }
          ],
          mappingField: ''
        },
        {
          authApiCode: '2',
          authApiName: '用户名称2',
          authApiDsc: '用户描述2',
          inputList: [
            { code: '3', name: '名称3', type: 'text' },
            { code: '4', name: '名称4', type: 'number' }
          ],
          mappingField: ''
        }
      ],
      selectedItems: [],
      mappingOptions: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    };
  },
  methods: {
    handleDrop(event) {
      console.log('Drop event:', event);
    },
    // renderContent (h,{ node, data,store }) {
    //   let domNode
    //   if(!data.children && data.children.authApiCode != null ) {
    //     const transData = {
    //       ...data,
    //     }
    //     domNode = (
    //       <Drag 
    //         tag="div"
    //         data={transData}
    //         scopeSlots={
    //           {
    //             default:()=>(
    //               <span class={[explor-tree-node, data.children.length ===0 ? 'drag-cursor': '', data.disabled ? 'disabled' : '']}>
    //                 <span class="ive-tree-title" style="display:flex; align-items:center;">
    //                   <el-tooltip content="查看标签定义" placement="top-start" open-delay={300}>
    //                     <img src={require(`../../../../img/xxx.svg`)} style="margin-right:4px;width:16px;height:16px"></img>
    //                   </el-tooltip>
    //                   {data.label + (data.disabled ? '(已禁用)' : '')}
    //                 </span>
    //               </span>
    //             ),
    //             'drag-image': ()=>(
    //               <div id="explore-drag-clone-node">
    //                 <img src={require(`../../../../img/xxx.svg`)}></img>
    //                 {data.condName}
    //               </div>
    //             )
    //           }
    //         }
    //         >
            
    //       </Drag>)
        
    //   }else {
    //     domNode = (
    //       <span class={['explore-tree-node', !data.children ? 'drag-cursor': '', data.disabled ? 'disabled':'']}>
    //         <span class="ive-tree-title" style="display:flex; align-items:center;">
    //           <el-tooltip content="查看标签定义" placement="top-start" open-delay={300}>
    //             <img src={require(``)} style="margin-right:4px;width:16px;height:16px"></img>
    //           </el-tooltip>
    //         </span>
    //       </span>
    //     )

    //     let domLeaf = data.label.length > 8 
    //                 ? <el-tooltip content={data.label} placement="top-start" open-delay={300}>
    //                     {domNode}
    //                   </el-tooltip>
    //                 : domNode
    //     return domLeaf
    //   }
    // },
  //   renderContent2(h, { node, data, store }) {
  //     let domNode;
  //     if (!data.children && data.children.authApiCode != null) {
  //       const transData = {
  //         ...data,
  //       };
  //       domNode = h('Drag', {
  //         props: {
  //           tag: 'div',
  //           data: transData,
  //         },
  //         scopedSlots: {
  //           default: () => h('span', {
  //             class: [
  //               'explor-tree-node',
  //               data.children.length === 0 ? 'drag-cursor' : '',
  //               data.disabled ? 'disabled' : ''
  //             ]
  //           }, 
  //           [
  //             h('span', {
  //               class: 'ive-tree-title',
  //               style: { display: 'flex', alignItems: 'center' }
  //             }, [
  //               h('el-tooltip', {
  //                 props: {
  //                   content: '查看标签定义',
  //                   placement: 'top-start',
  //                   openDelay: 300
  //                 }
  //               }, [
  //                 h('img', {
  //                   attrs: {
  //                     src: require('../../../../img/xxx.svg'),
  //                     style: 'margin-right:4px;width:16px;height:16px'
  //                   }
  //                 })
  //               ]),
  //               data.label + (data.disabled ? '(已禁用)' : '')
  //             ])
  //           ]),
  //           'drag-image': () => h('div', {
  //             attrs: { id: 'explore-drag-clone-node' }
  //           }, [
  //             h('img', {
  //               attrs: { src: require('../../../../img/xxx.svg') }
  //             }),
  //             data.condName
  //           ])
  //         }
  //       });
  //     } else {
  //       domNode = h('span', {
  //         class: [
  //           'explore-tree-node',
  //           !data.children ? 'drag-cursor' : '',
  //           data.disabled ? 'disabled' : ''
  //         ]
  //       },
  //        [
  //         h('span', {
  //           class: 'ive-tree-title',
  //           style: { display: 'flex', alignItems: 'center' }
  //         }, [
  //           h('el-tooltip', {
  //             props: {
  //               content: '查看标签定义',
  //               placement: 'top-start',
  //               openDelay: 300
  //             }
  //           }, [
  //             h('img', {
  //               attrs: {
  //                 src: require(''),
  //                 style: 'margin-right:4px;width:16px;height:16px'
  //               }
  //             })
  //           ])
  //         ])
  //       ]);
      

  //       let domLeaf = data.label.length > 8
  //         ? h('el-tooltip', {
  //             props: {
  //               content: data.label,
  //               placement: 'top-start',
  //               openDelay: 300
  //             }
  //           }, [domNode])
  //         : domNode;
  //       return domLeaf;
  //     }
  //     return domNode;
  //   }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
}

.left-panel,
.right-panel {
  width: 45%;
  padding: 10px;
  border: 1px solid #ccc;
}

.item,
.generated-item {
  padding: 10px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: move;
}

.generated-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.generated-item > div {
  flex: 1;
  margin: 0 10px;
}
.drop-list {
  min-height: 200px;
  /* border: 1px dashed red; */
}
</style>